<template>
  <div class="pageIndexMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--基本信息-->
    <div class="pageBody" id="pageBody" >
      <!-- 左侧部分 -->
      <PageMenu :lang="lang"></PageMenu>
       <!-- 右侧部分 -->
      <div class="pageMain">
        <div class="Avatar_uesr">
          <dl>
            <dt><img src="./images/Basic_Information_01.png"></dt>
            <dd>
              <!-- {{getCustomer.Account}} -->
              {{lang['basic_userName']}}：{{mixUserInfo.userName}}
              <a class="edt-usernameBtn" @click="editUserName" v-show="getCustomer.IsEditAccount"><img src="./images/edt-username.png" ></a>
            </dd>
          </dl>
        </div>

        <div class="security">
          <!-- 手机 -->
           <div class="item clearfix">
            <div class="title"><p>{{lang['basic_mobilePhoneAuthentication']}}:</p></div>
            <p class="content">
              <a v-show="!getCustomer.Phone">{{lang['basic_notSet']}}</a>
              <span v-show="getCustomer.Phone">{{getCustomer.AreaCode}}{{getCustomer.Phone}} </span>
            </p>
            <a class="operation"  @click='isTogglePhone = !isTogglePhone'>
              <font v-show="getCustomer.Phone">{{lang['basic_revise']}}</font>
              <font v-show="!getCustomer.Phone">{{lang['Immediate binding']}}</font>
              <img src="./images/downArrow.png" v-show="!isTogglePhone">
              <img src="./images/upperArrow.png" v-show="isTogglePhone">
            </a>
          </div>
          <MobileBinding
            :lang="lang"
            :langKey="langKey"
            :countryList="countryList"
            @GetCustomerList = "GetCustomerList"
            v-show="!getCustomer.Phone && isTogglePhone"
          >
          </MobileBinding>

          <MobileModify
            :lang="lang"
            :langKey="langKey"
            :countryList="countryList"
            @GetCustomerList = "GetCustomerList"
            v-show="getCustomer.Phone && isTogglePhone"
          >
          </MobileModify>

          <!-- 邮箱 -->
          <div class="item clearfix">
            <div class="title"><p>{{lang.basic_postbox}}:</p></div>
            <p class="content">
              <a v-show="!getCustomer.Email">{{lang['basic_notSet']}}</a>
              <span v-show="getCustomer.Email">{{getCustomer.Email}}</span>
            </p>
            <a class="operation" @click='isToggleEmail = !isToggleEmail'>
              <font v-show="getCustomer.Email">{{lang['basic_revise']}}</font>
              <font v-show="!getCustomer.Email">{{lang['Immediate binding']}}</font>
              <img src="./images/downArrow.png" v-show="!isToggleEmail">
              <img src="./images/upperArrow.png" v-show="isToggleEmail">
            </a>
          </div>
          <EmailBinding
            :lang="lang"
            :langKey="langKey"
            @GetCustomerList = "GetCustomerList"
            v-show="!getCustomer.Email && isToggleEmail"
          >
          </EmailBinding>
          <EmailModify
            :lang="lang"
            :langKey="langKey"
            @GetCustomerList = "GetCustomerList"
            v-show="getCustomer.Email && isToggleEmail"
          >
          </EmailModify>

           <!-- Google认证 -->
          <div class="item clearfix" >
            <div class="title"><p>{{lang['basic_googleAuthentication']}}:</p></div>
            <p class="content ">
              <a v-show="!getCustomer.IsGoogleTFA">{{lang['googelBasic_unrecognized']}}</a>
              <span v-show="getCustomer.IsGoogleTFA" class="green">{{lang['googelAuthenticated']}}</span>
            </p>
            <a class="operation" @click='isToggleGoogle = !isToggleGoogle'>
              <font v-show="getCustomer.IsGoogleTFA">{{lang['basic_close']}}</font>
              <font v-show="!getCustomer.IsGoogleTFA">{{lang['basic_immediateAuthentication']}}</font>
              <img src="./images/downArrow.png" v-show="!isToggleGoogle">
              <img src="./images/upperArrow.png" v-show="isToggleGoogle">
            </a>
          </div>
          <GoogleBinding
            :lang="lang"
            :getCustomer = "getCustomer"
            @GetCustomerList = "GetCustomerList"
            v-show="!getCustomer.IsGoogleTFA && isToggleGoogle"
          >
          </GoogleBinding>

          <GoogleClose
            :lang="lang"
            :getCustomer = "getCustomer"
            @GetCustomerList = "GetCustomerList"
            v-show="getCustomer.IsGoogleTFA && isToggleGoogle"
          >
          </GoogleClose>

          <!-- 实名认证 -->
          <div class="item clearfix" v-bind:class="{ Certification: getCustomer.Card}">
            <div class="title"><p>{{lang.basic_identityAuthentication}}:</p></div>
            <p class="content ">
              <a v-if="getCustomer.VerifyResult === 0">
                {{lang['verificationBasic_unrecognized']}}
              </a>
              <span v-if="getCustomer.VerifyResult === 1">
                {{lang.basic_notPass}}： 
                {{certIfonList.Thereason === '1' ? lang['basic_notPass error one'] : ''}}
                {{certIfonList.Thereason === '2' ? lang['basic_notPass error two'] : ''}}
                {{certIfonList.Thereason === '3' ? lang['basic_notPass error three'] : ''}}
                {{certIfonList.Thereason === '4' ? certIfonList.Remark : ''}}
              </span>
              <span v-if="getCustomer.VerifyResult === 2" class="green">
                {{lang['basic_certificationPass']}}
              </span>
              <span v-if="getCustomer.VerifyResult === 3">
                {{lang['basic_authenticationData']}}
              </span>
            </p>
            <a class="operation" @click='isToggleCaidVerified = !isToggleCaidVerified' v-show="getCustomer.VerifyResult === 0 || getCustomer.VerifyResult === 1">
              <font>{{lang['verificationAuthenticated']}}</font>
              <img src="./images/downArrow.png" v-show="!isToggleCaidVerified">
              <img src="./images/upperArrow.png" v-show="isToggleCaidVerified">
            </a>

            <a class="operation" @click='isShowcheckVerified = !isShowcheckVerified' v-show="getCustomer.VerifyResult === 2">
              <font>{{lang['basic_authenticated']}}</font>
              <img src="./images/downArrow.png" v-show="!isShowcheckVerified">
              <img src="./images/upperArrow.png" v-show="isShowcheckVerified">
            </a>
          </div>


          <CheckVerified
            :lang="lang"
            :countryType="countryType"
            :certIfonList="certIfonList"
            v-show="isShowcheckVerified && getCustomer.VerifyResult === 2"
          >
          </CheckVerified>

          <ChinaVerified
            :lang="lang"
            :langKey = "langKey"
            :countryList="countryList"
            :countryCodeType="countryCodeType"
            :certIfonList="certIfonList"
            v-show="(getCustomer.VerifyResult === 0 || getCustomer.VerifyResult === 1) && isToggleCaidVerified"
            @GetCustomerList = "GetCustomerList"
          >
          </ChinaVerified>

          <!-- 密码登录-->
          <div class="item clearfix Certification" >
            <div class="title"><p>{{lang.basic_loginPassword}}:</p></div>
            <p class="content ">
              <span>{{lang.basic_passwordStrength}}:
                <em v-if="getCustomer.PasswordLevel === 0 " class="red">{{lang['register_Unqualified']}}</em>
                <em v-if="getCustomer.PasswordLevel === 1 " class="red">{{lang['register_PasswordWeak']}}</em>
                <em v-if="getCustomer.PasswordLevel === 2 " class="red">{{lang['register_Passwordin']}}</em>
                <em v-if="getCustomer.PasswordLevel === 3 " class="green">{{lang['register_PasswordStrong']}}</em>
              </span>
            </p>
            <a class="operation" @click='isTogglePassword = !isTogglePassword'>
              {{lang['basic_revise']}}
              <img src="./images/downArrow.png" v-show="!isTogglePassword">
              <img src="./images/upperArrow.png" v-show="isTogglePassword">
            </a>
          </div>
          <PasswordModify
            :lang="lang"
            :langKey="langKey"
            :getCustomer = "getCustomer"
            @GetCustomerList = "GetCustomerList"
            v-show="isTogglePassword"
          >
          </PasswordModify>


          <!-- PIN设置-->
          <div class="item clearfix">
            <div class="title"><p>{{lang['basic_capitalPassword']}}:</p></div>
            <p class="content ">
              <a v-show="getCustomer.NeedToSetSecurifyPwd">{{lang['basic_unrecognized']}}</a>
              <span v-show="!getCustomer.NeedToSetSecurifyPwd" class="green">{{lang['basic_hasBeenSetUp']}}</span>
            </p>
            <a class="operation operation1" @click="isTogglePin = !isTogglePin">
              {{lang['basic_revise']}}
              <img src="./images/downArrow.png" v-show="!isTogglePin">
              <img src="./images/upperArrow.png" v-show="isTogglePin">
            </a>
          </div>
          <ModifyPin
            :lang="lang"
            :langKey="langKey"
            :getCustomer= "getCustomer"
            @GetCustomerList = "GetCustomerList"
            v-show="isTogglePin"
          >
          </ModifyPin>
          <SwModal :isShow.sync="isShowForgerPin" :isShowBg="true" modalClass="userModal" :isCloseOnClickBg="true" :isShowCloseBtn =" true" :title="lang['reset fund password']">
            <div style="width:480px;">
              <FindPin
              :lang="lang"
              :langKey="langKey"
              :getCustomer= "getCustomer"
              >
              </FindPin>
            </div>
          </SwModal>
          <!-- 修改用户名 -->
          <SwModal :isShow.sync="isShowEdtUserName" :isShowBg="true" modalClass="UserName"  :isCloseOnClickBg="true" :isShowCloseBtn =" true" :onClosed="onClosed">
            <div class="edtUserName">
              <h3>{{lang['basic Modify user name']}}</h3>
              <p>{{lang['basic only have one chance to change the user name']}}</p>
              <input type="text" name="" v-model="account" @input="changeUserName" ref="userName" :placeholder="lang['4-16 Letters or Numbers']">
              <button type="button" :class="{disabled : !account}" @click="confirmEdtUser">{{lang['basic Confirm modification']}}</button>
            </div>
          </SwModal>
        </div>
      </div>
    </div>
    <PageFooter2 :lang="lang"  :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import EventBus from '@/service/EventBus.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import LS from '@/utils/LocalStorage.js'

import PageMenu from './components/pageMenu.vue'
import MobileBinding from './components/mobileBinding.vue'
import MobileModify from './components/mobileModify.vue'
import EmailBinding from './components/emailBinding.vue'
import EmailModify from './components/emailModify.vue'
import GoogleBinding from './components/googleBinding.vue'
import GoogleClose from './components/googleClose.vue'
import PasswordModify from './components/passwordModify.vue'
import ModifyPin from './components/modifyPin.vue'
import ChinaVerified from './components/chinaVerified.vue'
import FindPin from './components/findPin.vue'
import CheckVerified from './components/checkVerified.vue'
import { mapGetters } from 'vuex'
export default {
  mixins: [commonMixins],
  data () {
    return {
      getCustomer: {},
      isTogglePhone: false,
      isToggleEmail: false,
      isToggleGoogle: false,
      isTogglePassword: false,
      isTogglePin: false,
      isToggleCaidVerified: false,
      countryCodeType: '',
      isShowForgerPin: false,
      countryList: [],
      isShowcheckVerified: false,
      certIfonList: {},
      countryType: '',
      isShowEdtUserName: false,
      account: ''
    }
  },
  components: {
    PageMenu,
    MobileBinding,
    MobileModify,
    EmailBinding,
    EmailModify,
    GoogleBinding,
    GoogleClose,
    PasswordModify,
    ModifyPin,
    ChinaVerified,
    FindPin,
    SwModal,
    CheckVerified
  },
  computed: {
    ...mapGetters({
      langKey: 'langKey',
      mixUserInfo: 'userInfo'
    })
  },
  watch: {
    langKey () {
      this.initCountryList()
    }
  },
  methods: {
    changeUserName () {
      let userNameInput = this.$refs.userName
      let value = userNameInput.value
      let userName = (value.match(/[0-9a-zA-Z]+/g) || []).join('')
      userNameInput.value = userName
      this.account = userName
    },
    editUserName () {
      this.isShowEdtUserName = true
    },
    confirmEdtUser () {
      if (!this.account) { return }
      if (this.account.length < 4) {
        ModalApi.message(this.lang['basic User name is too short'])
        return
      }
      if (this.account.length > 16) {
        ModalApi.message(this.lang['basic User name is too length'])
        return
      }
      this.$http.post('Customer/UpdateAccount', {
        Account: this.account
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.isShowEdtUserName = false
          this.mixUserInfo.userName = this.account
          let userinfo = LS.get('userInfo')
          userinfo.Account = this.account
          LS.set('userInfo', userinfo)
          this.GetCustomerList()
          ModalApi.message(this.lang['successfully changed'])
        }
      })
    },
    GetCustomerList () {
      this.$http.post('Security/GetCustomer', {

      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.getCustomer = res || {}
        this.countryCodeType = res.CountryCode
      })
    },
    initCountryList () {
      this.$http.get('/static/js/data/country_' + this.langKey + '.json', {

      }, {
        isCustomUrl: true,
        modalOptions: {
          modalClass: 'userModal'
        }
      }).then((res) => {
        let list = []
        for (let i = 0; i < res.Data.length; i++) {
          for (let j = 0; j < res.Data[i].Data.length; j++) {
            res.Data[i].Data[j].Areacode = res.Data[i].Data[j].Areacode.replace('+', '')
            list.push(res.Data[i].Data[j])
          }
        }
        this.countryList = list
      })
    },
    getCustomerCertified () {
      this.$http.post('Security/GetCustomerCertified', {}, {
        isDisposeCode: false
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.certIfonList = res.Data || {}

          for (let i = 0; i < this.countryList.length; i++) {
            if (this.certIfonList.CountryCode === this.countryList[i].Code) {
              this.countryType = this.countryList[i].Name
            }
          }
        }
      })
    },
    init () {
      Promise.all([this.initCountryList(), this.GetCustomerList()]).then((all) => {
        this.getCustomerCertified()
      })
    },
    onClosed () {

    }
  },
  created () {
    // 找回pin
    EventBus.$on('isShowForgerPin', (isShowForgerPin) => {
      this.isShowForgerPin = isShowForgerPin
    })
  },
  mounted () {
    // 实名认证跳转默认展开
    this.isToggleCaidVerified = this.$route.query.isToggleCaidVerified
    // 手机绑定跳转默认展开
    this.isTogglePhone = this.$route.query.isTogglePhone
    // 跳转找回Pin设置 同时展开Pin修改 和找回PIN
    this.isTogglePin = this.$route.query.isShowForgerPin
    this.isShowForgerPin = this.$route.query.isShowForgerPin
    // 跳转邮箱
    this.isToggleEmail = this.$route.query.isToggleEmail
    this.init()
  }
}
</script>

<style lang="less">

.pageIndexMain{
  background: #14141c;
  .red{ color:#FD3117 }
  .green{ color:#48D046 }
  .Avatar_uesr{
    height: 48px;
    padding-bottom: 16px;
    border-bottom: solid 1px #23252F;
    dt{
      width: 48px;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      float: left;

      img{
        max-width: 40px;
        max-height: 40px;
        vertical-align: middle;
      }
    }

    dd{
      padding-left: 13px;
      height: 48px;
      line-height: 48px;
      float: left;
      font-size:16px;
      color: #fff;

      .edt-usernameBtn{
        padding-left: 10px; display: inline-block; line-height: 48px;

        img{ vertical-align: middle; }
      }
    }
  }
  .security {
    margin-top: 20px;

    .item {
      margin-top: 10px;
      width: 100%;
      height: 48px;
      line-height: 48px;
      overflow: hidden;
      background:#2A3440;

      .title {
        float: left;
        margin-left: 18px;
        width: 220px;

        p{
          font-size:14px;
          color: #fff;
        }
      }
      .content {
        float: left;
        margin-left: 30px;
        color: #c3c1c1;
        a{
          color: #FD3117
        }
        span{
          color: #ccc;
          img{
            padding-left: 10px;
          }

          &.red{ color:#FD3117 }
          &.green{ color:#48D046 }
        }
      }
      .operation {
        float: right;
        margin-right: 20px;
        height: 48px;
        line-height: 48px;
        color: #3782FF;
        text-align: center;

        img{
          vertical-align: middle;
          padding: 0 0 0 9px;
        }
      }
    }
  }
}

.modal.UserName {
  padding-bottom: 20px;
}
.modal.UserName.actiive .btn.ok {
  background:#282f3b;  
  color: #777c84;
}
.edtUserName {
  width: 420px;
  padding:0 80px 0;
  text-align: center;

  h3 {
    padding:40px 0 0;
    font-size: 16px;
    color: #FFFFFF;
  }

  p{
    font-size: 12px;
    color: #FFFFFF;
  }
  input{
    margin: 20px 0 40px;
    width: 100%;
    height: 46px;
    line-height: 46px;
    background: #2A3440;
    border-radius: 2px;
    color: #fff;
    text-align: center;
  }

  button {
    display: block;
    width: 220px;
    height:40px;
    background: #3782FF;
    border-radius: 2px;
    font-size: 14px;
    margin: 0 auto 20px;
    color: #fff;
    &.disabled {
      color: rgba(255,255,255,.5);
      background: #282f3b;
      cursor: no-drop;
    }
  }
}

</style>
